$l-space-root: 2 !default;

@mixin l-fn($space, $direction, $size, $n) {
	@if $n {
		#{$space}-#{$direction}: #{$size * $l-space-root}rpx;
	} @else {
		#{$space}-#{$direction}: #{-$size * $l-space-root}rpx;
	}
}
@mixin l-get-styles($direction, $i, $space, $n) {
	@if $direction == t {
		@include l-fn($space, top, $i, $n);
	}
	@if $direction == r {
		@include l-fn($space, right, $i, $n);
	}
	@if $direction == b {
		@include l-fn($space, bottom, $i, $n);
	}
	@if $direction == l {
		@include l-fn($space, left, $i, $n);
	}
	@if $direction == x {
		@include l-fn($space, left, $i, $n);
		@include l-fn($space, right, $i, $n);
	}
	@if $direction == y {
		@include l-fn($space, top, $i, $n);
		@include l-fn($space, bottom, $i, $n);
	}
	@if $direction == a {
		@if $n {
			#{$space}: #{$i * $l-space-root}rpx;
		} @else {
			#{$space}: #{-$i * $l-space-root}rpx;
		}
	}
}

@each $orientation in m, p {
	$space: margin;
	@if $orientation == m {
		$space: margin;
	} @else {
		$space: padding;
	}
	@for $i from 0 through 20 {
		@each $direction in t, r, b, l, x, y, a {
			.l-#{$orientation}#{$direction}-#{$i} {
				@include l-get-styles($direction, $i, $space, true);
			}
			.l-#{$orientation}#{$direction}-n#{$i} {
				@include l-get-styles($direction, $i, $space, false);
			}
		}
	}
}

$l-radius-root: 2 !default;

@mixin l-radius($d, $size) {
	$l-radius-value: #{$size * $l-radius-root}rpx;
	@if $d == t {
		border-top-left-radius: $l-radius-value;
		border-top-right-radius: $l-radius-value;
	} @else if $d == r {
		border-top-right-radius: $l-radius-value;
		border-bottom-right-radius: $l-radius-value;
	} @else if $d == b {
		border-bottom-left-radius: $l-radius-value;
		border-bottom-right-radius: $l-radius-value;
	} @else if $d == l {
		border-top-left-radius: $l-radius-value;
		border-bottom-left-radius: $l-radius-value;
	} @else if $d == tl {
		border-top-left-radius: $l-radius-value;
	} @else if $d == tr {
		border-top-right-radius: $l-radius-value;
	} @else if $d == br {
		border-bottom-right-radius: $l-radius-value;
	} @else if $d == bl {
		border-bottom-left-radius: $l-radius-value;
	} @else if $d == a {
		border-radius: $l-radius-value;
	}
}

@each $direction in t, r, b, l, tl, tr, br, bl, a {
	@for $i from 0 through 20 {
		.l-r#{$direction}-#{$i} {
			@include l-radius($direction, $i);
		}
	}
}

.l-round {
	border-radius: 50%;
}

$l-border-root: 2 !default;
@mixin l-border($d, $size) {
	$color: #f0f0f0;
	$type: solid;
	$l-border-value: #{$size * $l-border-root}rpx $type $color;
	@if $d == t {
		border-top: $l-border-value;
	} @else if $d == r {
		border-right: $l-border-value;
	} @else if $d == b {
		border-bottom: $l-border-value;
	} @else if $d == l {
		border-left: $l-border-value;
	} @else if $d == a {
		border: $l-border-value;
	}
}

@each $direction in t, r, b, l, a {
	@for $i from 0 through 5 {
		.l-b#{$direction}-#{$i} {
			@include l-border($direction, $i);
		}
	}
}
